<template>
  <el-tag
    :size="size"
    @click="tagClick"
    class="tag-filter pointer"
    :type="selected ? 'danger' : 'primary'"
    :effect="selected ? 'dark' : 'light'"
    v-text="title"
  />
</template>

<script>
export default {
  name: 'tag-filter',
  props: {
    size: {
      type: String, // '', 'medium', 'small', 'mini'
      default: 'small',
    },
    title: {
      type: String,
      required: true,
    },
  },
  computed: {
    curTags() { return this.$route.query.tags || []; },
    selected() { return this.curTags.includes(this.title); },
  },
  methods: {
    tagClick() {
      const curTags = JSON.parse(JSON.stringify(this.curTags));
      if (this.selected) curTags.splice(curTags.indexOf(this.title), 1);
      else curTags.push(this.title);
      const newQuery = Object.assign({}, this.$route.query, { tags: curTags, page: undefined });
      this.$router.push({ path: this.$route.path, query: newQuery });
    },
  },
};
</script>

<style></style>
